<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>数据</el-breadcrumb-item>
        <el-breadcrumb-item>充值</el-breadcrumb-item>
        <el-breadcrumb-item>交易订单明细</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <avue-crud
        ref="crud"
        :data="data"
        v-model="form"
        :option="option"
        :page.sync="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-reset="form = {}"
        @search-change="searchChange"
      >
        <template slot="sss" slot-scope="scope">
          <el-row>
            <span
              v-if="
                scope.row.business_type == 1 || scope.row.business_type == 3
              "
            >
              {{
                scope.row.vip_type == 0
                  ? "月卡"
                  : scope.row.vip_type == 1
                  ? "季卡"
                  : "年卡"
              }}
            </span>
            <span v-else>
              {{ scope.row.total_fee + "(元)" }}
            </span>
          </el-row>
        </template>
        <!-- 自定义按钮 -->
        <template slot-scope="scope" slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-download"
            size="small"
            plain
            @click="handleExcel()"
            >导出Excel</el-button
          >
          <el-tag style="margin-right: 10px"
            >总充值金额：{{ totalMoney }} 美元</el-tag
          >
        </template>
        <template slot="business_type" slot-scope="scope">
          <span>{{
            scope.row.business_type == 0
              ? "书币充值"
              : scope.row.business_type == 1 || 3
              ? "会员充值"
              : ""
          }}</span>
        </template>
        <template slot="vip_type" slot-scope="scope">
          <span v-if="scope.row.business_type == 0"> 书币充值 </span>
          <span v-else>
            {{ scope.row.vip_type | rechargeDetail }}
          </span>
        </template>
      </avue-crud>
    </basic-container>
    <export-message :dialogVisible="dialogVisible"></export-message>
  </div>
</template>

<script>
import { catUrl } from "@/config/env";
import { common } from "@/api/cat/httpRequest";
import { catPayOrder as baseUrl } from "@/api/cat/baseUrls";
var vip_type_data = [
  {
    label: "月卡",
    value: 0,
  },
  {
    label: "季卡",
    value: 1,
  },
  {
    label: "年卡",
    value: 2,
  },
  {
    label: "连续包月",
    value: 3,
  },
  {
    label: "连续包季",
    value: 4,
  },
  {
    label: "连续包年",
    value: 5,
  },
];
export default {
  filters: {
    rechargeDetail(val) {
      let obj = vip_type_data.find((ele) => {
        return ele.value == val;
      });
      return obj.label;
    },
  },
  data() {
    return {
      dialogVisible: false,
      page: {
        total: 0,
        pageSize: 10,
      },
      ztime: [],
      totalMoney: 0,
      type: true,
      data: [],
      params: {},
      form: {},
      option: {
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        border: true,
        menu: false,
        column: [
          {
            label: "统计日期",
            type: "daterange",
            prop: "stats_date",
            valueFormat: "yyyy-MM-dd",
            hide: true,
            search: true,
          },
          {
            label: "用户注册时间",
            type: "daterange",
            prop: "user_stats_date",
            valueFormat: "yyyy-MM-dd",
            hide: true,
            search: true,
          },
          {
            label: "充值时间",
            prop: "create_time",
            type: "input",
            search: false,
          },
          {
            label: "商户订单号",
            prop: "order_no",
            type: "input",
          },
          {
            label: "第三方订单号",
            type: "input",
            prop: "out_order_no",
            search: true,
          },
          {
            label: "用户ID",
            prop: "user_id",
            type: "input",
            search: true,
          },
          {
            label: "国家/地区",
            prop: "area_name",
            type: "input",
            search: true,
          },
          {
            label: "用户注册时间",
            prop: "reg_time",
            type: "input",
          },
          {
            label: "渠道号",
            prop: "channel_id",
            type: "input",
            search: true,
          },
          {
            label: "版本号",
            prop: "app_version",
            type: "input",
            search: true,
          },
          {
            label: "支付方式",
            prop: "pay_type",
            type: "select",
            search: true,
            dicData: [
              {
                label: "苹果充值",
                value: 4,
              },
              {
                label: "PayPal充值",
                value: 5,
              },
              {
                label: "Google充值",
                value: 6,
              },
            ],
          },
          {
            label: "充值类型",
            type: "select",
            prop: "business_type",
            search: true,
            slot: true,
            dicData: [
              {
                label: "书币充值",
                value: 0,
              },
              // {
              //   label: "会员充值",
              //   value: 1,
              // },
              {
                label: "会员充值",
                value: 3,
              },
            ],
          },
          {
            label: "充值详情",
            type: "select",
            prop: "vip_type",
            search: true,
            slot: true,
            dicData: vip_type_data,
          },
          {
            label: "是否成功",
            prop: "flag",
            type: "select",
            search: true,
            dicData: [
              {
                label: "未支付",
                value: 0,
              },
              {
                label: "支付成功",
                value: 1,
              },
              {
                label: "支付进行中",
                value: 2,
              },
              {
                label: "支付失败",
                value: 3,
              },
            ],
          },
          {
            label: "是否首次充值",
            type: "select",
            prop: "is_first_recharge",
            search: true,
            dicData: [
              {
                label: "是",
                value: 1,
              },
              {
                label: "否",
                value: 0,
              },
            ],
          },
          {
            label: "充值金额(美元)",
            type: "input",
            prop: "total_fee",
          },
          {
            label: "书籍名称",
            prop: "book_name",
            type: "input",
            search: false,
          },
        ],
      },
    };
  },
  methods: {
    /**数据导出 */
    async handleExcel() {
      this.loading = true;
      this.dialogVisible = true;
      //处理搜索条件
      let params = { ...this.$refs.crud.searchForm };
      params.route = "数据/充值/订单交易明细";

      let export_condition = "";
      let userInfo = this.$store.state.user.userInfo;
      params.export_user_id = userInfo.id;
      params.export_user_name = userInfo.username;
      params.pageNum = 1;
      params.pageSize = 1000;
      console.log(params)
      if (params.stats_date.length > 0) {
        export_condition +=
          " &时间区间：" +
          params.stats_date[0].toString() +
          "~" +
          params.stats_date[1].toString();
        params.rechargeDateStart = params.stats_date[0];
        params.rechargeDateEnd = params.stats_date[1];
      }
      if (params.user_stats_date.length > 0) {
        export_condition +=
          " &时间区间：" +
          params.user_stats_date[0].toString() +
          "~" +
          params.user_stats_date[1].toString();
        params.userRegDateStart = params.user_stats_date[0];
        params.userRegDateEnd = params.user_stats_date[1];
      }
      if (params.out_order_no) {
        params.outOrderNo = params.out_order_no;
        export_condition += " &三方订单号：" + params.out_order_no;
      }
      if (params.user_id) {
        params.userId = params.user_id;
        export_condition += " &用户id:" + params.user_id;
      }
      if (params.area_name) {
        params.areaName = params.area_name;
        export_condition += " &国家/地区:" + params.area_name;
      }
      if (params.channel_id) {
        params.channelId = params.channel_id;
        export_condition += " &渠道号:" + params.channel_id;
      }
      if (params.app_version) {
        params.appVersion = params.app_version;
        export_condition += " &版本号:" + params.app_version;
      }
      if (params.$business_type) {
        params.businessType = params.business_type;
        export_condition += " &充值类型：" + params.$business_type;
        // export_condition +=
        //   " &充值类型：" +
        //   this.option.column[11].dicData.filter(
        //     (source) => source.value == params.business_type
        //   )[0].label;
      }
      if (params.$vip_type) {
        params.vipType = params.vip_type;
        export_condition += " &会员类型：" + params.$vip_type;
        // export_condition +=
        //   " &会员类型：" +
        //   this.option.column[11].dicData.filter(
        //     (source) => source.value == params.vip_type
        //   )[0].label;
      }
      if (params.$pay_type) {
        params.payType = params.pay_type;
        export_condition += " &支付类型：" + params.$pay_type;
        // export_condition +=
        //   " &支付类型：" +
        //   this.option.column[10].dicData.filter(
        //     (source) => source.value == params.pay_type
        //   )[0].label;
      }
      if (params.$flag) {
        export_condition += " &支付状态：" + params.$flag;
        // export_condition +=
        //   " &支付状态：" +
        //   this.option.column[12].dicData.filter(
        //     (source) => source.value == params.flag
        //   )[0].label;
      }
      if (params.$is_first_recharge) {
        params.isFirstRecharge = params.is_first_recharge;
        export_condition += " &是否是首次充值：" + params.$is_first_recharge;
        // export_condition +=
        //   " &是否是首次充值：" +
        //   this.option.column[13].dicData.filter(
        //     (source) => source.value == params.is_first_recharge
        //   )[0].label;
      }

      params.export_condition =
        export_condition == "" ? "所有" : export_condition;

      //调用导出接口
      let response = await common(
        baseUrl.exportData,
        { ...params, ...this.default },
        this.page,
        "POST"
      );
      this.loading = false;
    },
    /**获取列表 */
    async getList() {
      this.loading = true;
      //清空表格列表
      this.data = [];
      //发送请求获取数据
      let response = await common(
        `${baseUrl.statisticsAll}`,
        { ...this.params, ...this.defalut },
        this.page,
        "POST"
      );
      console.log(response);
      this.page = response.page;
      this.data = response.data;
      /**获取查询总金额 */
      let totalMoney = await common(
        baseUrl.totalAmount,
        { ...this.params, ...this.default },
        null,
        "POST"
      );
      if (totalMoney.code == 1) {
        this.totalMoney = totalMoney.data;
      }

      this.loading = false;
    },
    /**刷新 */
    refreshChange() {
      this.getList();
    },
    /**搜索 */
    searchChange(params, done) {
      params.outOrderNo = params.out_order_no;
      params.userId = params.user_id;
      params.channelId = params.channel_id;
      params.appVersion = params.app_version;
      // if(params.hasOwnProperty('business_type')) {
      //   params.businessType = params.business_type
      // }
      // if (params.hasOwnProperty('vip_type')) {
      //   params.vipType = params.vip_type;
      // }
      // if (params.hasOwnProperty("pay_type")) {
      //   params.payType = params.pay_type;
      // }
      // if (params.hasOwnProperty("is_first_recharge")) {
      //   params.isFirstRecharge = params.is_first_recharge;
      // }
      if (params.hasOwnProperty("stats_date")) {
        params.rechargeDateStart = params.stats_date[0];
        params.rechargeDateEnd = params.stats_date[1];
      }
      if (params.hasOwnProperty("user_stats_date")) {
        params.userRegDateStart = params.user_stats_date[0];
        params.userRegDateEnd = params.user_stats_date[1];
      }
      this.params = JSON.parse(
        JSON.stringify(params)
          .replace(/business_type/g, "businessType")
          .replace(/vip_type/g, "vipType")
          .replace(/pay_type/g,"payType")
          .replace(/is_first_recharge/g,"isFirstRecharge")
      );
      // this.params = params;
      this.page.currentPage = 1;
      delete params.daterange;
      this.getList();
      if (done) {
        done();
      }
    },
  },
};
</script>